<script setup>
import { getUserList, deleteUser } from '@/api/user'
import { message } from 'ant-design-vue'
import { onMounted, ref } from 'vue'
import AddUser from './components/add-user.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// definexxx 宏命令
defineOptions({
  name: 'HomeIndex'
})
// 定义列数据
const columns = [
  {
    title: '用户编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '用户姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '用户年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '用户性别',
    dataIndex: 'gender',
    key: 'gender'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate'
  }
]
// 获取用户列表 -- 响应式数据，要用ref进行变量命名
const list = ref([])
// 新增用户--弹窗
const showDialog = ref(false)
// 编辑按钮
const addUserRef = ref(null)
const currentId = ref(null) // 定义传值的id
const getUserAPI = async () => {
  list.value = await getUserList()
}

// 删除用户
const delUserAPI = async (id) => {
  await deleteUser(id)
  message.success('删除成功')
  getUserAPI()
}

// 编辑用户 -- 不能只控制弹窗，还要做到的数据回显，所以需要做一个方法
const editUser = async (id) => {
  showDialog.value = true // 显示弹层
  // console.log('id', id)
  // 第一种方法：父组件调用子组件的方法
  // addUserRef.value?.getUserDetail(id)
  // 第二种方法：props传值把id传过去，watch监听 id的变化 获取详情
  currentId.value = id
}

// 首次进入渲染
onMounted(() => {
  // 首次渲染已经完成
  getUserAPI()
})

const logout = () => {
  // router.push('/login?id=1') // router.query.id
  router.push('/login/1') // router.params.id
}
</script>
<template>
  <a-row style="height: 60px; padding: 20px" align="middle" justify="end">
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        青青子
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a @click.prevent="logout">退出登陆</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-row>
  <a-row style="height: 60px; padding: 20px" align="middle" justify="end">
    <a-button type="primary" @click="showDialog = true">新增用户</a-button>
  </a-row>
  <!-- 放置表格 -->
  <a-table :dataSource="list" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operate'">
        <a-space>
          <a-button type="primary" @click="editUser(record.id)">编辑</a-button>
          <a-popconfirm title="Are you sure delete this userInfo?" @confirm="delUserAPI(record.id)">
            <a-button type="primary" danger>删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
      <template v-if="column.dataIndex === 'gender'">
        {{ record.gender === 1 ? '女' : '男' }}
      </template>
    </template>
  </a-table>
  <AddUser
    :currentId="currentId"
    ref="addUserRef"
    v-model:showDialog="showDialog"
    @addSuccess="getUserAPI"
    @clearId="currentId = null"
  ></AddUser>
</template>
<style></style>
